<!-- 首页组件 -->
<!-- 首页组件 -->
<!-- 首页组件 -->
<template>
  <div class="bgcolor">
    <home-header></home-header>
    <home-swiper :swiperList = swiperList></home-swiper>
    <home-icons :iconsList = iconsList></home-icons>
    <home-location></home-location>
    <home-activity></home-activity>
    <home-hot :hotList = hotList></home-hot>
    <home-like :likeList = likeList></home-like>
    <home-vacation :vacationList = vacationList></home-vacation>
  </div>
</template>

<script>
// 引入vuex
import { mapState } from 'vuex'
// 头部组件
import HomeHeader from './pages/Header'
// 轮播组件
import HomeSwiper from './pages/Swiper'
// 栏目组件
import HomeIcons from './pages/Icons'
// 定位组件
import HomeLocation from './pages/Location'
// 官方活动组件
import HomeActivity from './pages/Activity'
// 热门榜单组件
import HomeHot from './pages/Hot'
// 猜你喜欢组件
import HomeLike from './pages/Like'
// 周末去哪组件
import HomeVacation from './pages/vacation'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeActivity,
    HomeHot,
    HomeLike,
    HomeVacation
  },
  data () {
    return {
      // 定义一个空数组，将获取到的list数据传到空数组里
      swiperList: [],
      iconsList: [],
      hotList: [],
      likeList: [],
      vacationList: [],
      changeCitys: ''
    }
  },
  computed: {
    ...mapState(['city'])
  },

  methods: {
    getHttp () {
      this.$http.get('api/dataHome.json')
        .then((res) => {
          // console.log(res.d13271367061ata.data[0].swiperList[0].imgUrl)
          // 获取到json文件里的data里的data里的第一个数据
          console.log(res)
          const data = res.data.data
          // 使用forEach方法将循环data，获取它的项
          data.forEach((item, index) => {
            // 判断获取到的项里的city数据和vuex中的城市名字是否一样，如果一样就将里边的数据传给子组件
            if (this.city === item.city) {
              this.swiperList = item.swiperList
              this.iconsList = item.iconsList
              this.hotList = item.hotList
              this.likeList = item.likeList
              this.vacationList = item.vacationList
            }
          })
        })
    }
  },
  mounted () {
    // 将当前的城市传给changeCity 用于判断当前和鼠标又重新选择的城市是否相等
    this.changeCitys = this.city
    this.getHttp()
  },
  // 只要使用了KeepAlive标签 它会生成一个生命周期函数
  activated () {
    // 判断changeCity和重新点击的城市是否相等
    // 如果不相等，那么就要重新发送一次数据请求 并且将点击的城市再次赋给changeCity
    if (this.changeCitys !== this.city) {
      this.getHttp()
      this.changeCitys = this.city
    }
    // console.log(this.changeCitys,this.city)
  }
}
</script>

<style lang="stylus" scoped>
  .bgcolor
    background #f5f5f5
</style>
